<template>
  <div>
    <div :header="isAdd ? '添加物料' : '编辑物料'" width="70%">
      <t-collapse :default-value="[0]">
        <t-collapse-panel header="基础信息">
          <div>
            <t-form :data="formData" :colon="true" labelWidth="120px" labelAlign="right">
              <t-space>
                <t-row :gutter="15">
                  <!-- <t-col :span="4" class="form_col">
                    <t-form-item label="项目编号" name="FMATERIALID">
                      <t-input v-model="formData.FMATERIALID" />
                    </t-form-item>
                  </t-col> -->
                  <!-- <t-col :span="4" class="form_col">
                    <t-form-item label="料号" name="FNumber">
                      <t-input v-model="formData.FNumber" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col> -->
                  <t-col :span="4" class="form_col">
                    <t-form-item label="名称" name="FName">
                      <t-input v-model="formData.FName" placeholder="请输入内容" />
                    </t-form-item>
                  </t-col>
                  <t-col :span="4" class="form_col">
                    <t-form-item label="物料分组" name="FMaterialGroupName">
                      <t-input v-model="formData.FMaterialGroupName" placeholder="">
                        <template #suffixIcon>
                          <t-icon name="search" :style="{ cursor: 'pointer' }" @click="clickShowMaterGroup" />
                          <!-- <search-icon  /> -->
                        </template>
                      </t-input>
                      <!-- <t-tree-select
                        v-model="formData.FMaterialGroup"
                        :data="materGroupList"
                        clearable
                        placeholder="请选择"
                      /> -->
                    </t-form-item>
                  </t-col>
                  <t-col :span="4" class="form_col">
                    <t-form-item label="物料属性" name="FErpClsID">
                      <t-select v-model="formData.FErpClsID" placeholder="请选择">
                        <t-option label="请选择" value=""></t-option>
                        <t-option v-for="item in metaData.FErpClsID" :label="item.Caption"
                          :value="item.Value">{{item.Caption}}</t-option>
                      </t-select>

                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="存货类别" name="FCategoryID">
                      <t-select v-model="formData.FCategoryID" placeholder="请选择">
                        <t-option label="请选择" value=""></t-option>
                        <t-option v-for="item in categoryList" :label="item.FName"
                          :value="item.FCATEGORYID">{{item.FName}}</t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>


                  <t-col :span="4" class="form_col">
                    <t-form-item label="基本单位" name="FBaseUnitId">
                      <t-select v-model="formData.FBaseUnitId" placeholder="请选择">
                        <t-option label="请选择" value=""></t-option>
                        <t-option v-for="item in bdUnits" :label="item.FName"
                          :value="item.FUNITID">{{item.FName}}</t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :span="4" class="form_col">
                    <t-form-item label="品牌" name="F_ora_Text">
                      <t-input v-model="formData.F_ora_Text" placeholder="请输入品牌" />
                    </t-form-item>
                  </t-col>


                  <t-col :span="4" class="form_col">
                    <t-form-item label="规格型号" name="FSpecification">
                      <t-input v-model="formData.FSpecification" placeholder="请输入规格型号" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="4" class="form_col">
                    <t-form-item label="图号" name="F_ora_Text1">
                      <t-input v-model="formData.F_ora_Text1" placeholder="请输入图号" />
                    </t-form-item>
                  </t-col>
                  <t-col :span="5" class="form_col">
                    <t-form-item label="规格文件路径" name="F_ora_Text1_path">
                      <t-input v-model="formData.F_ora_Text1_path" placeholder="请输入文件路径" />
                    </t-form-item>
                  </t-col>

                  <t-col :span="5" class="form_col">
                    <t-form-item label="描述" name="FDescription">
                      <t-input v-model="formData.FDescription" placeholder="请输入描述" />
                    </t-form-item>
                  </t-col>

                </t-row>
              </t-space>
            </t-form>

          </div>
        </t-collapse-panel>


        <t-collapse-panel header="辅助信息">
          <div>
            <t-form :data="formData" :colon="true" labelWidth="120px" labelAlign="right">

              <t-row :gutter="15">
                <t-col :span="4" class="form_col">
                  <t-form-item label="计划策略" name="FPlanningStrategy">
                    <t-select v-model="formData.FPlanningStrategy" placeholder="请选择" :readonly="materId">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FPlanningStrategy" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="制造策略" name="FMfgPolicyId"  >
                    <t-select v-model="formData.FMfgPolicyId" placeholder="请选择" :readonly="materId">
                      <t-option v-for="item in manuPolicyList" :label="item.FName"
                        :value="item.FID">{{item.FName}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="订货策略" name="FOrderPolicy"  >
                    <t-select v-model="formData.FOrderPolicy" placeholder="请选择" :readonly="materId">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FOrderPolicy" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="创建人" name="FCreateName" >
                    <t-input v-model="formData.FCreateName" placeholder=""  readonly borderless/>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="创建日期" name="FCreateDate">
                    <t-input v-model="formData.FCreateDate" placeholder=""  readonly/>
                  </t-form-item>
                </t-col>


                <t-col :span="4" class="form_col">
                  <t-form-item label="修改人" name="FModifierName">
                    <t-input v-model="formData.FModifierName" placeholder=""  readonly/>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="修改日期" name="FModifyDate">
                    <t-input v-model="formData.FModifyDate" placeholder="" readonly />
                  </t-form-item>
                </t-col>




                <t-col :span="4" class="form_col">
                  <t-form-item label="审核人" name="FApproverId">
                    <t-input v-model="formData.FApproverId" placeholder="" readonly />
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="审核日期" name="FApproveDate">
                    <t-input v-model="formData.FApproveDate" placeholder=""  readonly/>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="禁用人" name="FForbidderId">
                    <t-input v-model="formData.FForbidderId" placeholder=""  readonly/>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="禁用日期" name="FForbidDate">
                    <t-input v-model="formData.FForbidDate" placeholder=""   readonly	/>
                  </t-form-item>
                </t-col>

                


                <!-- <t-col :span="4" class="form_col">
                  <t-form-item label="创建组织" name="FCreateOrgId">
                    <t-tree-select v-model="formData.FCreateOrgId" :data="departList" clearable placeholder="请选择" />
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="使用组织" name="FUseOrgId">
                    <t-tree-select v-model="formData.FUseOrgId" :data="departList" clearable placeholder="请选择" />
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="条形码类型" name="FCodeType_CMK">
                    <t-select v-model="formData.FCodeType_CMK" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FCodeType_CMK" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>

                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="计量单位" name="FUnitId_CMK">
                    <t-select v-model="formData.FUnitId_CMK" placeholder="请选择计量单位">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in bdUnits" :label="item.FName"
                        :value="item.FUNITID">{{item.FName}}</t-option>
                    </t-select>

                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="套件" name="FSuite">
                    <t-select v-model="formData.FSuite" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FSuite" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="特征件子项" name="FFeatureItem">
                    <t-select v-model="formData.FFeatureItem" placeholder="请选择">
                      <t-option label="请选择" value=" "></t-option>
                      <t-option v-for="item in metaData.FFeatureItem" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
               
                <t-col :span="4" class="form_col">
                  <t-form-item label="库存单位" name="FStoreUnitID">
                    <t-select v-model="formData.FStoreUnitID" placeholder="请选择">
                      <t-option label="请选择" value=" "></t-option>
                      <t-option v-for="item in bdUnits" :label="item.FName"
                        :value="item.FUNITID">{{item.FName}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="币别" name="FCurrencyId">
                    <t-select v-model="formData.FCurrencyId" placeholder="请选择">
                      <t-option label="请选择" value=" "></t-option>
                      <t-option v-for="item in bdCurrencyList" :label="item.FName"
                        :value="item.FCURRENCYID">{{item.FName}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="换算方向" name="FUnitConvertDir">
                    <t-select v-model="formData.FUnitConvertDir" placeholder="请选择">
                      <t-option label="请选择" value=" "></t-option>
                      <t-option v-for="item in metaData.FUnitConvertDir" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="序列号生成时机" name="FSNGenerateTime">
                    <t-select v-model="formData.FSNGenerateTime" placeholder="请选择">
                      <t-option label="请选择" value=" "></t-option>
                      <t-option v-for="item in metaData.FSNGenerateTime" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="业务范围" name="FSNManageType">
                    <t-select v-model="formData.FSNManageType" placeholder="请选择">
                      <t-option label="请选择" value=" "></t-option>
                      <t-option v-for="item in metaData.FSNManageType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>


                <t-col :span="4" class="form_col">
                  <t-form-item label="销售计价单位" name="FSalePriceUnitId">
                    <t-select v-model="formData.FSalePriceUnitId" placeholder="请选择">
                      <t-option label="请选择" value=" "></t-option>
                      <t-option v-for="item in bdUnits" :label="item.FName"
                        :value="item.FUNITID">{{item.FName}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="销售单位" name="FSaleUnitId">
                    <t-select v-model="formData.FSaleUnitId" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in bdUnits" :label="item.FName"
                        :value="item.FUNITID">{{item.FName}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="采购单位" name="FPurchaseUnitId">
                    <t-select v-model="formData.FPurchaseUnitId" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in bdUnits" :label="item.FName"
                        :value="item.FUNITID">{{item.FName}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="采购计价单位" name="FPurchasePriceUnitId">
                    <t-select v-model="formData.FPurchasePriceUnitId" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in bdUnits" :label="item.FName"
                        :value="item.FUNITID">{{item.FName}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="配额方式" name="FQuotaType">
                    <t-select v-model="formData.FQuotaType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FQuotaType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

               
                
                <t-col :span="4" class="form_col">
                  <t-form-item label="固定提前期单位" name="FFixLeadTimeType">
                    <t-select v-model="formData.FFixLeadTimeType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FFixLeadTimeType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="变动提前期单位" name="FVarLeadTimeType">
                    <t-select v-model="formData.FVarLeadTimeType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FVarLeadTimeType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>


                <t-col :span="4" class="form_col">
                  <t-form-item label="检验提前期单位" name="FCheckLeadTimeType">
                    <t-select v-model="formData.FCheckLeadTimeType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FCheckLeadTimeType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="订货间隔期单位" name="FOrderIntervalTimeType">
                    <t-select v-model="formData.FOrderIntervalTimeType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FOrderIntervalTimeType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="4" class="form_col">
                  <t-form-item label="预留类型" name="FReserveType">
                    <t-select v-model="formData.FReserveType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FReserveType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="时间单位" name="FPlanOffsetTimeType">
                    <t-select v-model="formData.FPlanOffsetTimeType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FPlanOffsetTimeType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="发料方式" name="FIssueType">
                    <t-select v-model="formData.FIssueType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FIssueType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>


                <t-col :span="4" class="form_col">
                  <t-form-item label="超发控制方式" name="FOverControlMode">
                    <t-select v-model="formData.FOverControlMode" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FOverControlMode" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="最小发料批量单位" name="FMinIssueUnitId">
                    <t-select v-model="formData.FMinIssueUnitId" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in bdUnits" :label="item.FName"
                        :value="item.FUNITID">{{item.FName}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="工时单位" name="FStandHourUnitId">
                    <t-select v-model="formData.FStandHourUnitId" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FStandHourUnitId" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>

                <t-col :span="4" class="form_col">
                  <t-form-item label="倒冲数量" name="FBackFlushType">
                    <t-select v-model="formData.FBackFlushType" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FBackFlushType" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>


                <t-col :span="4" class="form_col">
                  <t-form-item label="库存属性" name="FInvPtyId">
                    <t-select v-model="formData.FInvPtyId" placeholder="请选择">
                      <t-option label="请选择" value=""></t-option>
                      <t-option v-for="item in metaData.FInvPtyId" :label="item.Caption"
                        :value="item.Value">{{item.Caption}}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col> -->

              </t-row>
              </t-form>
          </div>
        </t-collapse-panel>
      </t-collapse>
    </div>

    <div style="display: flex; flex-direction: row; justify-content: center; margin-top: 30px">
      <t-button @click="clickCancel">取消</t-button>
      <t-button :loading="draftSaving" @click="clickSave(true)">暂存</t-button>
      <t-button :loading="isSaving" @click="clickSave(false)">确定</t-button>
    </div>


    <MaterGroupDialog ref="materGroupDialogRef" @onConfirm="onMaterGroupChange" />
  </div>
</template>
<script>
  import { ref, reactive, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { MessagePlugin } from 'tdesign-vue-next';
  import { queryMaterialGroupList, saveMaterial, addMaterial, queryMaterialList, queryMaterMeta, queryMaterCategoryList } from '@/service/material';
  import { queryMaterialType } from '@/service/materType';
  import { queryBdUnitList } from '@/service/bdUnit';
  import { queryBdCurrencyList } from '@/service/bdCurrency';

  import { querySysDepartList } from '@/service/sysDepart';
  import { queryManuPolicyList } from '@/service/manuPolicy';
  
  import MaterGroupDialog from './components/materGroupDialog.vue'

  import router from '@/router';
  import {useRouter} from 'vue-router'
  export default {
    components: { MaterGroupDialog },
    setup(props, { emit }) {
      const visible = ref(false);
      const isAdd = ref(false);
      const route = useRoute();
      const router = useRouter();

      const materId = ref();
      const materGroupList = ref([]);
      const materTypeList = ref([]);
      const draftSaving = ref(false);
      const isSaving = ref(false);
      const departList = ref([]);
      const metaData = ref({})
      const bdUnits = ref([])
      const categoryList = ref([])
      const bdCurrencyList = ref([])
      const materGroupDialogRef = ref();
      const manuPolicyList = ref([]);
      
      const formData = reactive({});

      const openModal = async (row) => {
        isAdd.value = !row;
        if (!isAdd.value) {
          Object.assign(formData, row);
          // formData
          // const res = await queryMaterialList({FNumber})
          // if(res[0]){
          //   Object.assign(formData,res[0])
          // }
        }
        visible.value = true;
      };

      const loadMaterGroup = async () => {
        const res = await queryMaterialGroupList({});
        if (res) {
          materGroupList.value = res.dataList;
          console.log('loadMaterGroup', materGroupList.value);
        }
      };
      const loadMaterType = async () => {
        const res = await queryMaterialType({});
        if (res) {
          materTypeList.value = res;
        }
      };

      const loadMaterMeta = async () => {
        const res = await queryMaterMeta();
        if (res) {
          metaData.value = res.data;
        }
      };

      const loadBdUnitList = async () => {
        const res = await queryBdUnitList()
        if (res.dataList[0]) {
          bdUnits.value = res.dataList
        }
      }


      const clickCancel = () => {
        router.go(-1);
      };

      const clickSave = async (isDraft) => {
        if (isDraft) {
          draftSaving.value = true;
        } else {
          isSaving.value = true;
        }
        try {
          let res = null;
          if (materId.value) {
            // 更新
            res = await saveMaterial({
              ...formData,
              is_draft: isDraft,
            });
          } else {
            res = await addMaterial({
              ...formData,
              is_draft: isDraft,
            });
          }
          if (res.success) {
            emit('updateData');
            MessagePlugin.success('保存成功！');
            router.go(-1)
          } else {
            MessagePlugin.error('保存失败:' + res.msg);
          }
        } catch (e) {
          MessagePlugin.error('保存失败:' + e);
        }
        if (isDraft) {
          draftSaving.value = false;
        } else {
          isSaving.value = false;
        }
      };

      const loadMaterData = async () => {
        const res = await queryMaterialList({
          FMATERIALID: materId.value,
          curr_page: 1,
          page_size: 2,
        });
        if (res.dataList[0]) {
          Object.assign(formData, res.dataList[0]);
          console.log('FMaterialGroup', formData);
        }
      };

      const loadDepartList = async () => {
        const res = await querySysDepartList();
        if (res.dataList[0]) {
          departList.value = res.dataList;
        }
      };

      const loadMaterCate = async () => {
        const res = await queryMaterCategoryList();
        if (res.dataList[0]) {
          categoryList.value = res.dataList;
        }
      }

      const loadBdCurrencyList = async () => {
        const res = await queryBdCurrencyList();
        if (res.dataList[0]) {
          bdCurrencyList.value = res.dataList;
        }
      }

      const loadManuPolicyList = async () => {
        const res = await queryManuPolicyList({});
        if (res.dataList[0]) {
          manuPolicyList.value = res.dataList;
        }
      }
      

      const clickShowMaterGroup = () => {
        materGroupDialogRef.value.openGroupDialog()

      }

      const onMaterGroupChange = (materGroup) => {
        Object.assign(formData, { FMaterialGroup: materGroup['FID'], FMaterialGroupName: materGroup['FName'] })
      }

      onMounted(() => {
        const { id } = route.params;
        if (id) {
          materId.value = id;
          loadMaterData();
        }
        loadMaterMeta()
        loadMaterGroup();
        loadMaterType();
        loadDepartList();
        loadManuPolicyList()
        loadBdUnitList()
        loadMaterCate()
        loadBdCurrencyList()
      });

      return {
        materId,
        visible,
        openModal,
        isAdd,
        clickSave,
        formData,
        materGroupList,
        materTypeList,
        clickCancel,
        draftSaving,
        isSaving,
        departList,
        metaData,
        bdUnits,
        categoryList,
        bdCurrencyList,
        manuPolicyList,
        materGroupDialogRef,
        clickShowMaterGroup,
        onMaterGroupChange
      };
    },
  };
</script>
<style>
  .form_col {
    margin-top: 10px;
  }
</style>